<template>
	<view class="profile-edit-container">
		<!-- 头像 -->
		<view class="nav"> </view>
		<view class="form">
			<!-- 详细地址 -->
			<view class="form-item">
				<text class="label">详细地址</text>
				<input class="inputs" v-model="form.address" placeholder="请输入详细地址" />
			</view>

			<!-- 出生日期和性别 -->
			<view class="row-group">
				<view class="form-item half-width">
					<text class="label">出生日期</text>
					<view class="readonly-value">{{ form.birthday }}</view>
				</view>
				<view class="form-item half-width">
					<text class="label">性别</text>
					<view class="readonly-value">{{ form.gender }}</view>
				</view>
			</view>

			<!-- 姓名 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<view class="readonly-value">{{ form.name }}（姓名和身份证号手机号性别无法修改）</view>
			</view>

			<!-- 居民身份证 -->
			<view class="form-item">
				<text class="label">居民身份证</text>
				<view class="readonly-value">{{ form.idCard }}</view>
			</view>

			<!-- 手机号 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<view class="readonly-value">{{ form.phone }}</view>
			</view>

			<!-- 修改按钮 -->
			<button class="submit-btn" @click="handleSubmit">确认修改</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const form = ref({
		address: "广西东省深圳市龙华区xxxx",
		birthday: "1996-11-02",
		gender: "男",
		name: "显示姓名",
		idCard: "45000000000000",
		phone: "19166666666"
	});

	const handleSubmit = () => {
		uni.showLoading({
			title: '保存中...'
		});

		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
		}, 1500);
	};
</script>

<style scoped>
	.profile-edit-container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.nav {
		width: 180rpx;
		height: 180rpx;
		background-color: #83ffc3;
		border-radius: 50%;
		margin-top: 40rpx;
		margin-left: 260rpx;
		/* margin-bottom: 100rpx; */
	}

	.form {
		background-color: #fff;
		margin-top: 50rpx;
		padding: 20rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.label {
		display: block;
		font-size: 38rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.inputs {
		width: 90%;
		height: 90rpx;
		padding: 0 10rpx;
		border-bottom: 1rpx solid #00d36d;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
	}

	.readonly-value {
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #858585;
	}

	.row-group {
		display: flex;
		justify-content: space-between;
	}

	.half-width {
		width: 48%;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #00d36d;
		color: white;
		font-weight: bold;
		border-radius: 8rpx;
		font-size: 40rpx;
		margin-top: 60rpx;
	}
</style>